<template>
    <!-- 点击检索 -->
    <div class="top_nav__search--seize" v-if="click_state">
        <div @click="searchClick"></div>
    </div>
    <!-- 鼠标检索 -->
    <div class="top_nav--mousemove">
        <div></div>
    </div>
    <!-- 登录界面 -->
    <div class="top_nav__login" v-if="login_page_flag">
        <div class="top_nav__login--holder_top" @click="loginClick"></div>
        <div class="top_nav__login--holder_middle">
            <div @click="loginClick"></div>
            <login-form
                @emitValue="getEmitValue"
                class="top_nav__login--self"
            ></login-form>
            <div @click="loginClick"></div>
        </div>
        <div class="top_nav__login--holder_bottom" @click="loginClick"></div>
    </div>

    <Transition>
        <div class="top_nav" :class="activeTopNav ? 'nav-dis' : 'nav-undis'">
            <div class="wrap">
                <div class="logo">
                    <div>LOGO</div>
                </div>

                <div class="buttons">
                    <div
                        @click="toHome"
                        :class="
                            activePage === 'Home'
                                ? 'button_active'
                                : 'button_static'
                        "
                    >
                        首页
                        <span></span>
                    </div>
                    <div
                        @click="toBlog"
                        :class="
                            activePage === 'Blog'
                                ? 'button_active'
                                : 'button_static'
                        "
                    >
                        文章
                        <span></span>
                    </div>
                    <div
                        @click="toFile"
                        :class="
                            activePage === 'File'
                                ? 'button_active'
                                : 'button_static'
                        "
                    >
                        文件
                        <span></span>
                    </div>
                </div>

                <div class="search">
                    <div
                        class="search_lcon"
                        :class="
                            active_search
                                ? 'search_lcon-dis'
                                : 'search_lcon_undis'
                        "
                        @click="changeSearch"
                    >
                        {{ disSearch_lcon() }}
                    </div>
                    <div v-if="active_search">
                        <input
                            type="text"
                            ref="search"
                            class="top_nav__search_input"
                            @keyup.enter="searchClick"
                        />
                        <span></span>
                    </div>
                </div>

                <div
                    class="user"
                    @click="toUser"
                    :class="
                        activePage === 'User'
                            ? 'button_active'
                            : 'button_static'
                    "
                >
                    <div class="user_flag">{{ user_account }}</div>
                </div>
            </div>
            <div class="black_line--a"></div>
            <div class="black_line--b"></div>
        </div>
    </Transition>

</template>

<script setup>
import {
    watch,
    ref,
    reactive,
    nextTick,
    inject,
    onMounted,
    onUpdated,
} from "vue";
import { getMouse_position } from "../utils/MouseMove.js";
import { getScroll_position } from "../utils/ScrollMove.js";
import { useRouter } from "vue-router";
import LoginForm from "./user/LoginForm.vue";
const storeEP = inject("storeEP"); // 引入状态

// 监听路由变化
const router = useRouter();
watch(
    () => router.currentRoute.value.path,
    (newValue, oldValue) => {
        // console.log("watch", oldValue, newValue);
        // 非手动跳跃
        // console.log(storeEP.state.user_account);
        if (!storeEP.state.user_account) {
            setTimeout(() => {
                user_account.value = "Login";
            }, 100);
            return;
        } else if (newValue === "/backstage/manage-blog") {
            activePage.value = "User";
        } else if (newValue === "/home") {
            activePage.value = "Home";
        } else if (newValue === "/blog-editor") {
            activePage.value = null;
        } else if (newValue === "/blog/detail") {
            activePage.value = null;
        }
    },
    { immediate: true }
);

// 路由逻辑
const buttons = reactive({
    a: "首页",
    b: "文章",
    c: "文件",
});
// 默认定位
const activePage = ref("Home");

const toHome = async () => {
    if (activePage.value !== "Home") {
        activePage.value = "Home";
        if (router.currentRoute.value.fullPath === "/home") {
            await router.replace("/null");
            await router.push("/home");
            window.scrollTo({
                bottom: 0,
                top: 0,
                behavior: "smooth", // 平滑滚动
            });
        } else {
            await router.push("/home");

            window.scrollTo({
                bottom: 0,
                top: 0,
            });
        }
    } else {
        activePage.value = null;
        setTimeout(() => {
            toHome();
        }, 1);
    }
};

const toBlog = async () => {
    if (activePage.value !== "Blog") {
        activePage.value = "Blog";

        if (router.currentRoute.value.fullPath === "/home") {
            // 可以更加准确的判断屏幕的高度 需要类的抽象

            if (
                document.documentElement.scrollHeight >= 2000 ||
                document.body.scrollHeight >= 2000
            ) {
                window.scrollTo({
                    bottom: 0,
                    top: 480,
                    behavior: "smooth", // 平滑滚动
                });
            } else {
                window.scrollTo({
                    bottom: 0,
                    top: 0,
                    behavior: "smooth", // 平滑滚动
                });
            }
        } else {
            await router.push("/home");

            window.scrollTo({
                bottom: 0,
                top: 480,
                behavior: "smooth",
            });
        }
    } else {
        activePage.value = null;
        setTimeout(() => {
            toBlog();
        }, 1);
    }
};

const toFile = async () => {
    if (activePage.value !== "File") {
        activePage.value = "File";

        await router.push("/code42");
    } else {
        activePage.value = null;
        setTimeout(() => {
            toFile();
        }, 1);
    }
};

// 显示登录界面
const user_account = ref("LOGIN");
const toUser = () => {
    if (!storeEP.state.user_account && activePage.value !== "User") {
        activePage.value = "User";
        login_page_flag.value = !login_page_flag.value;
    } else if (!storeEP.state.user_account && activePage.value === "User") {
        activePage.value = null;
        setTimeout(() => {
            activePage.value = "User";
        }, 1);
        login_page_flag.value = !login_page_flag.value;
    } else if (storeEP.state.user_account && activePage.value === "User") {
        activePage.value = null;
        setTimeout(() => {
            activePage.value = "User";
        }, 1);
        return;
    } else if (storeEP.state.user_account) {
        toBackstage();
    }
};
const login_page_flag = ref(false); // 引入状态
const loginClick = () => {
    login_page_flag.value = false;
    // 判断焦点位置
    if (router.currentRoute.value.path.indexOf("/blog") > -1) {
        activePage.value = "Home";
    } else if (router.currentRoute.value.path.indexOf("/blog") > -1) {
        activePage.value = "Blog";
    } else if (router.currentRoute.value.path.indexOf("/file") > -1) {
        activePage.value = "File";
    } else {
        activePage.value = null;
    }
};
onMounted(() => {
    if (storeEP.state.user_account) {
        user_account.value = storeEP.state.user_account;
    }
});
onUpdated(() => {
    if (storeEP.state.user_account) {
        user_account.value = storeEP.state.user_account;
    }
});

// 跳转到用户后台
async function toBackstage() {
    await router.push("/backstage");
}

// 获取子组件对应的值 根据组件的值进行操作
const getEmitValue = (item) => {
    switch (item.value) {
        case 0: {
            console.log(item.value);
            login_page_flag.value = false;
            toBackstage();
            break;
        }
        case 1: {
            console.log(item.value);
            break;
        }
        case 2: {
            console.log(item.value);
            login_page_flag.value = false;
            break;
        }
    }
};

// 搜索框逻辑
// 搜索框显示
const active_search = ref(false);
// 搜索框元素
const search = ref();

// 搜索框点击事件检测
const click_state = ref(false);
const searchClick = () => {
    click_state.value = false;
    search_state = false;
    backSearch();
};

// 搜索框状态
let search_state = false;
const changeSearch = () => {
    if (!search_state) {
        toSearch();
        search_state = true;
    } else if (search_state) {
        backSearch();
        search_state = false;
    }
};

// 搜索框展示
const disSearch_lcon = () => {
    if (active_search.value) {
        return ">";
    } else {
        return "<";
    }
};

// 打开搜索框
function toSearch() {
    active_search.value = true;
    nextTick(() => {
        // 监听DOM更新以确保页面种存在input
        setTimeout(() => {
            search.value.focus();
            click_state.value = true;
        }, 500);
    });
}

// 关闭搜索框
function backSearch() {
    active_search.value = false;
}

// 滚动条逻辑
// 顶部导航展示
const activeTopNav = ref(true);
// 获取滚动条位置
const scroll_position = getScroll_position();
// 鼠标位置
const mouse_pisition = getMouse_position();

// 监听滚动条位置
let scroll_flag = true;
watch(scroll_position, (newValue, oldValue) => {
    if (newValue.y >= 80) {
        scroll_flag = false;
    } else {
        scroll_flag = true;
    }

    if (newValue.y >= 80 && !search_state && !mouse_flag) {
        activeTopNav.value = false;
    } else if (newValue.y < 80) {
        activeTopNav.value = true;
    }
});

// 监听鼠标位置
let mouse_flag = false;
watch(mouse_pisition, (newValue, oldValue) => {
    if (newValue.y >= 80) {
        mouse_flag = false;
    } else {
        mouse_flag = true;
    }

    if (newValue.y >= 80 && !search_state && !scroll_flag) {
        activeTopNav.value = false;
    } else if (newValue.y < 80) {
        activeTopNav.value = true;
    }
});
</script>

<style lang="scss" scoped>
// 登录框动作
@keyframes top_nav__login_self--t {
    0% {
        transform: scale(1, 0);
    }
    100% {
        transform: scale(1, 1);
    }
}
@keyframes top_nav__login_self--f {
}
.top_nav__login--self {
    animation-name: top_nav__login_self--t;
    animation-duration: 0.2s;
}

// 登录框背景动作
@keyframes top_nav__login--t {
    0% {
        // transform: scale(1, 0);
        background-color: rgba(0, 0, 0, 0);
    }
    100% {
        // transform: scale(1, 1);
    }
}
.top_nav__login {
    animation-name: top_nav__login--t;
    animation-duration: 0.2s;
}
// 登录框动作
.top_nav__login {
    position: fixed;
    // z-index: 1000;
    // top: 0;
    // left: 0;
    // background-color: #0000003c;
    background-image: radial-gradient(
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.7)
    );
    // background-image: radial-gradient(
    //     rgba(0, 0, 0, 0.2),
    //     rgba(0, 0, 0, 0.2),
    //     rgba(0, 0, 0, 0.7)
    // );
    // backdrop-filter: blur(2px);

    width: calc(100vw);
    height: calc(100vh);
    .top_nav__login--holder_top {
        height: ceil(24vh);
    }
    .top_nav__login--holder_middle {
        display: flex;
        div {
            flex: 1;
            // margin: 0 auto;
            // width: 100%;
        }
    }
    .top_nav__login--holder_bottom {
        height: 100%;
    }
}

// 导航栏动作
@keyframes top-nav-f {
    0% {
        top: 0px;
    }

    100% {
        top: -58px;
    }
}

@keyframes top-nav-t {
    0% {
        top: -58px;
    }

    100% {
        top: 0px;
    }
}

.nav-dis {
    animation-name: top-nav-t;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.nav-undis {
    animation-name: top-nav-f;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

// 导航动作
@keyframes button_active--t {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-1%, -10%);
    }

    100% {
        transform: translate(0, 0);
        font-weight: 600;
        color: var(--main-color-a);
    }
}

@keyframes button_active--f {
    0% {
        font-weight: 600;
    }

    100% {
    }
}

@keyframes button_active_span--t {
    0% {
    }

    100% {
        font-weight: 600;
        background-color: var(--main-color-a);
    }
}

@keyframes button_active_span--f {
    0% {
        background-color: var(--main-color-a);
    }

    100% {
    }
}

.button_active {
    // color: #ad9bd5;
    animation-name: button_active--t;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;

    span {
        animation-name: button_active_span--t;
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
    }
}

.button_static {
    animation-name: button_active--f;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;

    span {
        animation-name: button_active_span--f;
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
    }
}

// 搜索图标动作
@keyframes search_lcon_dis--t {
    0% {
        transform: translate(900%, 0) scale(-1, 1);
    }

    70% {
        transform: translate(-60%, 0) scale(1, 1);
    }

    85% {
        transform: translate(-75%, 0);
    }

    95% {
        transform: translate(20%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes search_lcon_dis--f {
    0% {
        transform: translate(-900%, 0) scale(1, -1);
    }

    85% {
        transform: translate(60%, 0) scale(1, 1);
    }

    100% {
        transform: translate(0, 0);
    }
}

.search_lcon-dis {
    animation-name: search_lcon_dis--t;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    cursor: pointer;
    font-size: 40px;
}

.search_lcon_undis {
    animation-name: search_lcon_dis--f;
    animation-duration: 0.15s;
    cursor: pointer;
    font-size: 40px;
}

.top_nav__search--seize {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    div {
        width: calc(100vw);
        height: calc(100vh);
    }
}

// 输入框动作
@keyframes top_nav__search_input--t {
    0% {
    }

    85% {
        background-color: #ad9bd500;
    }

    100% {
        background-color: var(--main-color-a);
    }
}

.search {
    span {
        animation-name: top_nav__search_input--t;
        animation-duration: 0.35s;
        animation-fill-mode: forwards;
    }
}

// 整体样式
.top_nav {
    color: rgb(133, 133, 133);
    z-index: 1;

    position: fixed;
    width: 100%;
    background-color: rgba(0, 0, 0);
    // filter: blur(2px);

    .wrap {
        margin: auto;
        height: 60px;
        display: flex;
        justify-content: flex-start;

        .logo {
            width: 200px;
            // flex: 1;
            line-height: 60px;
            // background-color: #ad9bd5;
            div {
                text-align: center;
            }
        }

        .buttons {
            user-select: none;
            line-height: 60px;
            white-space: nowrap; //溢出不换行
            div {
                color: rgb(166, 165, 165);
                cursor: pointer;
                width: 100px;
                text-align: center;
                display: inline-block;
            }

            div:hover {
                span {
                    background-color: var(--main-color-a);
                }
            }

            span {
                margin-top: -4px;
                display: block;
                height: 4px;
                width: auto;
            }
        }

        .search {
            flex: 5;
            line-height: 60px;
            display: flex;
            justify-content: flex-end;

            input {
                padding-top: 18px;
                height: 30px;
                background: rgba(67, 54, 54, 0);
                border: 0px;
                font-size: 20px;
                color: rgb(133, 133, 133);
            }

            input:focus {
                outline: none;
            }

            span {
                margin-top: -8px;
                display: block;
                height: 4px;
                width: auto;
            }
        }

        .user {
            cursor: pointer;
            user-select: none;

            width: 200px;
            // flex: 1;

            .user_flag {
                padding-top: 2px;
                line-height: 60px;

                font-size: 14px;
                text-align: center;
                overflow: hidden; //超出的文本隐藏
                white-space: nowrap; //溢出不换行
            }
        }
    }
    .black_line--a {
            height: 2px;
            // margin-top: 2px;
            background-color: #ffffff;
        }
    .black_line--b {
            height: 4px;
            // margin-top: 2px;
            background-color: #000000;
        }
}
</style>
